<template>
  <div class="release">
    <el-form class="release_form demo-ruleForm" :rules="rules" ref="form" label-position="left" label-width="110px" :model="formLabelAlign">
        <el-form-item class="release_form_item" label="文章标题:" prop="title">
            <el-input v-model.trim="formLabelAlign.title" type="textarea" class="release_form_area" :maxlength="50" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="release_form_item" label="摘要" prop="abstract">
            <el-input  :autosize="{ minRows: 3, maxRows: 3}" type="textarea" class="release_form_area" v-model.trim="formLabelAlign.abstract" :maxlength="200" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="release_form_item" label="图片布局" prop="isImg">
          <el-select v-model="formLabelAlign.isImg">
            <el-option :value="1" label="一张">一张</el-option>
            <el-option :value="2" label="三张靠左">三张靠左</el-option>
            <el-option :value="3" label="三张靠右">三张靠右</el-option>
          </el-select>
        </el-form-item>
        
        <div class="fsc">
            <el-form-item label="作者:">
                <p>无为</p>
            </el-form-item>
            <el-form-item label="总编:" class="mg_l100">
                <p>无为</p>
            </el-form-item>
        </div>
        <el-form-item label="上传封面图片(最多3张)">
            <div>
                <div v-on:mouseenter="iconFlag1.splice(index,1,true)" v-on:mouseleave="iconFlag1.splice(index,1,false)" v-for="(item,index) in images1" :key="index"  class="add_img_block">
                    <img class="add_img" :src="item"/>
                    <i v-show="iconFlag1[index]" @click="dialogVisible=true,dialogImageUrl=item" class="el-icon-zoom-in f_18 c_white img_i_1"></i>
                    <i v-show="iconFlag1[index]" @click="deleteImg(index,item,false)" class="el-icon-delete f_18 c_white img_i_2"></i>
                    <span v-show="iconFlag1[index]" class="img_mask"></span>
                </div>
                <el-upload
                    name="file"
                    action="/admin/tool/upLoadToOss"
                    :on-success="onSuccessImages"
                    list-type="picture-card"
                    :before-upload="beforeUpload"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="imagesRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="做客">
                </el-dialog>
            </div>
        </el-form-item>
        <el-form-item label="上传内容图片(最多30张)">
            <div>
                <div v-on:mouseenter="iconFlag2.splice(index,1,true)" v-on:mouseleave="iconFlag2.splice(index,1,false)" v-for="(item,index) in content" :key="index"  class="add_img_block">
                    <img class="add_img" :src="item"/>
                    <i v-show="iconFlag2[index]" @click="dialogVisible=true,dialogImageUrl=item" class="el-icon-zoom-in f_18 c_white img_i_1"></i>
                    <i v-show="iconFlag2[index]" @click="deleteImg(index,item,true)" class="el-icon-delete f_18 c_white img_i_2"></i>
                    <span v-show="iconFlag2[index]" class="img_mask"></span>
                </div>
                <el-upload
                    :on-success="onSuccessContent"
                    name="file"
                    :on-error='onError'
                    :before-upload="beforeUploadContent"
                    action="/admin/tool/upLoadToOss"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="contentRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </div>
        </el-form-item>
        <el-form-item>
            <div>最多可上传30张图片，必须是jpeg、jpg、png、bmp格式，且大小不超过5M</div>
        </el-form-item>
        <el-form-item>
            <el-button @click="cancel()">取消</el-button>
            <el-button type="primary" @click="addRelease()">{{this.$route.query.id?'保存草稿':'保存草稿'}}</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                plate: [],
                iconFlag1: [],      //判断封面图片里的icon是否隐藏
                iconFlag2: [],       //判断内容图片里的icon是否隐藏
                formLabelAlign: {
                    isImg: '',
                    title: '',        //文章标题
                    images: [],       //上传的封面图片
                    content: [],      //上传的内容图片
                    abstract:''     //摘要
                },
                images1: [],      //修改时需要渲染的封面图片
                content: [],     //修改时需要渲染的内容图片
                rules: { 
                    title:[{required: true, message: '请输入标题',trigger: 'blur'},{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }],
                    abstract:[{required: true, message: '请输入摘要',trigger: 'blur'},{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'change' }], 
                    isImg: [{required: true, message: '请选择图片布局',trigger: 'change'}] 
                },
                dialogImageUrl: '',   
                dialogVisible: false,
            }
        },
       
        created() {
            this.init();
        },
        methods: {
            deleteImg(index,src,flag) {              //修改文章时删除已上传的图片
                if(flag) {
                    this.formLabelAlign.content.splice(index,1)
                    this.content.splice(index,1)
                }else {
                    this.formLabelAlign.images.splice(index,1)
                    this.images1.splice(index,1)
                }
            },
    
            init() {          //初始化  
                if(this.$route.query.id) {
                  let { id } = this.$route.query;
                  console.log(id)
                    let url = '/admin/article/details';
                    let data = {id,};
                    this.$request.get(url,data).then(res=> {
                        console.log('init',res)  
                        var res = res.data;  
                        if(res.code=='0000') {
                            this.formLabelAlign.title = res.data.title;
                            this.formLabelAlign.abstract = res.data.abstract;
                            this.formLabelAlign.isImg = res.data.is_img;
                            this.formLabelAlign.images = res.data.images;
                            for(let item in res.data.images)  this.images1[item] = res.data.images[item]
                            this.formLabelAlign.content = res.data.content
                            for(let item in res.data.content) this.content[item] = res.data.content[item]

                            for(let i=0;i<res.data.images.length;i++) {
                                this.iconFlag1.push(false);
                            }
                            
                            for(let i=0;i<res.data.content.length;i++) {
                                this.iconFlag2.push(false);
                            }
                        }
                    })
                }
            },
            cancel() {
                this.$router.push('/article/list')
            },
            beforeUploadContent(file) {     //上传前的钩子
                console.log('ssssssssssssssssss',file)
                if(this.formLabelAlign.content.length>29) {
                    this.$message.error('最多上传30张图片');
                    return false
                }
                console.log(this.formLabelAlign.content.length)
                let istype = file.type === 'image/jpg'||file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/bmp'
                let isSize = file.size/1024/1024 < 5;
                if(!istype) {
                    this.$message.error('请用正确的图片格式')
                }
                if(!isSize) {
                    this.$message.error('图片超出5M')
                }
                    
                    // console.log(isSize,istype)
                
                return isSize&&istype
            },
            beforeUpload(file) {        //上传前的钩子
              if(this.formLabelAlign.images.length>2) {
                this.$message.error('最多上传3张图片');
                return false
              }
              console.log(this.formLabelAlign.images.length)
              let istype = file.type === 'image/jpg'||file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/bmp'
              let isSize = file.size/1024/1024 < 5;
              if(!istype) {
                  this.$message.error('请用正确的图片格式')
              }
              if(!isSize) {
                 this.$message.error('图片超出5M')
              }
                
                // console.log(isSize,istype)
              
              return isSize&&istype
             
            },
            
            addRelease() {                  //保存到草稿
                
                let { title, images, content,abstract,isImg } = this.formLabelAlign;
                
                this.$refs['form'].validate(valid=> {    
                    if(valid) {
                        if(this.formLabelAlign.images.length>0) {
                            if(this.formLabelAlign.content.length>0) {
                                if(this.$route.query.id) {
                                    let url = '/admin/article/edit';
                                    let { id } = this.$route.query;
                                    if(images.length<3 && isImg != 1 ) {
                                        this.$message.error('图片布局不正确');
                                        return false
                                    } 
                                    let data = {
                                        isImg,
                                        id,
                                        title,
                                        images,
                                        content,
                                        abstract,
                                    }
                                    this.$request.post(url,data).then(res=> {
                                        console.log(res.data.data.code)
                                        console.log(res.data)
                                        if(res.data.code=="0000") {
                                            this.$message({
                                                type: 'success',
                                                message: '修改成功'
                                            })
                                            this.$router.push('/article/list')
                                        }else {
                                            this.$message.error(res.data.message)
                                        }
                                    }).catch(err => {
                                        
                                    })
                                }else {
                                    let url= "/admin/article/add";
                                    if(images.length<3 && isImg != 1 ) {
                                        this.$message.error('图片布局不正确');
                                        return false
                                    } 
                                    let data = {
                                        isImg,
                                        title,
                                        images, 
                                        content,
                                        abstract 
                                    };
                                    console.log(isImg,images.length)
                                    this.$request.post(url,data).then(res => {
                                        if(res.data.code == "0000") {
                                            this.$message({
                                                type: 'success',
                                                message: '发布成功'
                                            });
                                            this.$router.push('/article/list')
                                        }else {
                                            this.$message.error(res.data.message)
                                            console.log(res.data.message)   
                                        }
                                    }).catch(err=> {
                                        console.log(url)
                                        this.$message.error(err.message)
                                        console.log(err)
                                    })
                                }

                            }else {
                                this.$message.error('请上传内容面图片')
                            }

                        }else{
                            this.$message.error('请上传封面面图片')
                        }
                    }else{
                        return false;
                    }
                })
                
            },

        //    gobeyond(files, fileList) {    //上传图片限制数量 文件超出时钩子
        //        console.log()
        //         let num = fileList.length;
        //         this.$message({
        //             message: '最多上传'+num+'张图片',
        //             type: 'warning'
        //         })
        //     },
            handlePictureCardPreview(file) {
                console.log(file)
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            onError(err, file, fileList) {                 //失败时的钩子
                console.log(err, file, fileList)
            },

            onSuccessImages(response, file, fileList) {     //上封面图片成功是的钩子
                // console.log(response.data)
                this.formLabelAlign.images.push(response.data[0])
                console.log(this.formLabelAlign.images)
            },

            imagesRemove(file, fileList) {      //删除封面图片时的钩子
                console.log(file,fileList)
                if(file.response) {
                    this.formLabelAlign.images.splice(this.formLabelAlign.images.indexOf(file.response.data[0]),1);
                }
            },

            contentRemove(file, fileList) {         //删除内容图片时的钩子 
                // console.log(file, fileList);
                if(file.response) {
                    this.formLabelAlign.content.splice(this.formLabelAlign.content.indexOf(file.response.data[0]),1)
                    
                }
            },

            onSuccessContent(response, file, fileList) {        //上传内容成功是的钩子

                console.log('sssssssssssssssssssss',response, file, fileList)
                this.formLabelAlign.content.push(response.data[0]);
            },
            
        }
    }
</script>
<style scoped lang="less">
    .release {
        padding: 0 40px;
        .release_form {
            width: 80%;
        }
        .release_form_item {
            width: 50%;
            
        }
        
    }
    .add_img_block {
        display: inline-block;
        position: relative;
        .add_img {
            box-sizing: border-box;
            width: 146px;
            height: 146px;
            margin-right: 10px;
            border: 1px solid #999;
            border-radius: 5px;
        }
        .img_i_1 {
            position: absolute;
            top: 63px;
            left: 40px;
            cursor: pointer;
            z-index: 11;
        }
        .img_i_2 {
            position: absolute;
            top: 63px;
            left: 79px;
            cursor: pointer;
            z-index: 11;
        }
        .img_mask {
            display: inline-block;
            width: 146px;
            height: 146px;
            background-color: #000000;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            opacity: 0.5;
            border-radius: 5px;
        }
    }
    
</style>
<style>
    .release .el-dialog__header {
        border: 0;
    }
</style>



